<!--
 * @Description: Description
 * @Author: lixianggang
 * @Date: 2022-11-18 10:32:02
 * @LastEditors: lixianggang
 * @LastEditTime: 2022-12-14 17:21:11
-->
<template>
  <div>
    <Editor v-model="content" :init="init"></Editor>
  </div>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/icons/default'
import 'tinymce/themes/silver/theme'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/autoresize'
import 'tinymce/plugins/fullscreen'

import { uploadFile } from '@/api/article/group'

export default{
  components: { Editor },
  props: {
    value: {
      type: String,
      default: ''
    },
  },
  data(){
    return{
      init: {
        skin_url: '/tinymce/skins/ui/oxide',
        height: 300,
        language_url: '/tinymce/langs/zh.js',
        language: 'zh_CN',
        maxheight: 800,
        fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
        branding: false,
        promotion: false,
        elementpath: false,
        plugins: 'image lists link code table autoresize wordcount fullscreen',
        images_upload_handler: (blobInfo, success, failure) => {
          const formData = new FormData()
          formData.append('file', blobInfo.blob())
          uploadFile(formData).then(res => {
            if(res.code === 200){
              const url = window.globalConfig.IMAGE_API + res.data.url
              success(url)
              return
            }
            failure('上传失败')
          }).catch(() => {
            failure('上传失败')
          })
        }
      },
      content: this.value
    }
  },
  watch: {
    value(newValue){
      this.content = newValue
    },
    content(newValue){
      this.$emit('input', newValue)
    },
  },
  mounted(){
    tinymce.init({})
  },
}
</script>
